<template>
  <div class="list">
    <div>list</div>
    <div class="table-wrapper">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
      <el-pagination class="pagination-style" background layout="prev, pager, next" :total="1000" />
    </div>
  </div>
</template>

<script setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style lang="scss" scoped>
.list {
  .table-wrapper {
    padding: 20px 20px 0 20px;
    background-color: white;
    .pagination-style {
      justify-content: flex-end;
      padding: 20px 0px;
    }
  }
}

@media (min-width: 1024px) {
  .list {
    min-height: 100vh;
  }
}
</style>
